<template>
    <div class="aside">
        <div>

            <el-menu active-text-color="#3F99F6" background-color="#304156" class="el-menu-vertical-demo"
                default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                :unique-opened="true"
                style="height: 100vh;">

                <!-- <div class="title">
                    <h1 v-if="isShow">若依管理系统</h1>
                </div> -->

                <el-menu-item class="el">
                    <img src="../imgs/logo.png">
                    <template #title>
                        <span>若依管理系统</span>
                    </template>
                </el-menu-item>

                <router-link to="/homepage/shouye" style="text-decoration: none;">
                    <el-menu-item index="1">
                        <el-icon>
                            <Odometer />
                        </el-icon>
                        <template #title>首页</template>
                    </el-menu-item>
                </router-link>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Tools />
                        </el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item
                        index="/sysManager/system"
                        @click="goSystem"
                    >
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>系统用户管理</span>
                    </el-menu-item>
                    <el-menu-item
                        index="/sysManager/user"
                        @click="goUser"
                    >
                        <el-icon>
                            <Operation />
                        </el-icon>
                        <span>普通用户管理</span>
                    </el-menu-item>
                    <router-link to="/homepage/dicManager" style="text-decoration: none;">
                        <el-menu-item index="2-3">
                            <el-icon>
                                <Collection />
                            </el-icon>
                            <span>公告管理</span>
                        </el-menu-item>
                    </router-link>
                    
                    <el-menu-item
                        index="/sysManager/company"
                        @click="goCompany"
                    >
                        <el-icon>
                            <Collection />
                        </el-icon>
                        <span>公司管理</span>
                    </el-menu-item>
<!-- ———————————————————————————————————————————————————————————— -->
                    <el-sub-menu index="2-4">
                        <template #title>
                            <el-icon>
                                <Management />
                            </el-icon>
                            <span>日志管理</span>
                        </template>

                        <router-link to="/homepage/opLogin" style="text-decoration: none;">
                            <el-menu-item index="2-4-1">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>操作日志</span>
                            </el-menu-item>
                        </router-link>

                        <el-menu-item index="2-4-2">
                            <el-icon>
                                <Memo />
                            </el-icon>
                            <span>登录日志</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
                <!-- —————————————————————————————————————————————— -->

                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <DataAnalysis />
                        </el-icon>
                        <span>课程管理</span>
                    </template>

                    <el-menu-item index="3-1" @click="goCourseType">
                            <el-icon>
                                <Histogram />
                            </el-icon>
                            <span>课程分类管理</span>
                        </el-menu-item>

                    <el-menu-item index="3-2" @click="goCourse">
                        <el-icon>
                            <Wallet />
                        </el-icon>
                        <span>课程管理</span>
                    </el-menu-item>
                    <el-menu-item index="3-3" @click="goCoursemark">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>课程评价管理</span>
                    </el-menu-item>
                    <el-menu-item
                        index="sysManager/CourseSc"
                        @click="goCourseSC"
                    >
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>课程收藏管理</span>
                    </el-menu-item>
                    <el-menu-item index="3-5" @click="goCoursetalk">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>课程交流表</span>
                    </el-menu-item>
                    <el-menu-item index="3-6" @click="goCoursereply">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>课程交流回复表</span >
                    </el-menu-item>
                    <el-menu-item index="3-7"
                    @click="goCoursepay">
                        <el-icon>
                            <DataLine />
                        </el-icon>
                        <span>课程购买记录表</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <Suitcase />
                        </el-icon>
                        <span>师资管理</span>
                    </template>

                    <el-menu-item index="4-1" @click="goconsult">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>咨询师管理</span>
                    </el-menu-item>

                    <el-menu-item index="4-2" @click="goLevel">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>咨询师等级管理</span>
                    </el-menu-item>

                    <el-menu-item index="4-3" @click="goSpecialty">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>擅长领域管理</span>
                    </el-menu-item>

                    <el-menu-item index="4-4" @click="gochargetype">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>收费分类管理</span>
                    </el-menu-item>

                    <el-menu-item index="4-5" @click="goCharge">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>收费标准管理</span>
                    </el-menu-item>

                    <!-- <el-menu-item index="4-5">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>咨询预约表</span>
                    </el-menu-item> -->

                    <el-menu-item index="4-6" @click="goprivatemessage">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>私信表</span>
                    </el-menu-item>
                    
                </el-sub-menu>

                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <Suitcase />
                        </el-icon>
                        <span>内容管理</span>
                    </template>

                    <el-menu-item index="5-1" @click="goArticle">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>文章管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-2" @click="goArticleType">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>文章分类管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-3" @click="goHeartkonw">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>心理知识管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-4" @click="goFM">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>FM管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-5" @click="goFree">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>公益中心管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-6" @click="goMT">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>心理测评管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-7" @click="goMyTest">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>用户测评管理</span>
                    </el-menu-item>

                    <el-menu-item
                        index="/sysManager/mynotice"
                        @click="goMyNotice"
                    >
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>我的通知管理</span>
                    </el-menu-item>

                    <el-menu-item index="5-9" @click="goMTQ">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>测试题目管理</span>
                    </el-menu-item>
                </el-sub-menu>
                
                <el-sub-menu index="6">
                    <template #title>
                        <el-icon>
                            <Suitcase />
                        </el-icon>
                        <span>心理答疑管理</span>
                    </template>

                    <el-menu-item index="6-1" @click="goQuestion">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>问题管理</span>
                    </el-menu-item>

                    <el-menu-item index="6-2" @click="goReply">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>回复管理</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="7"
                    >
                    <template #title>
                        <el-icon>
                            <Suitcase />
                        </el-icon>
                        <span>咨询预约管理</span>
                    </template>

                    <el-menu-item index="7-1" @click="goAppointment">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>咨询预约管理</span>
                    </el-menu-item>

                    <el-menu-item index="7-2"
                    @click="goAppointmentReply"
                    >
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>咨询回复管理</span>
                    </el-menu-item>

                    <el-menu-item index="7-3" @click="goPingJia">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>用户评价表</span>
                    </el-menu-item>
                </el-sub-menu>

           <!--      <el-sub-menu index="8">
                    <template #title>
                        <el-icon>
                            <Suitcase />
                        </el-icon>
                        <span>文章表</span>
                    </template>

                    <el-menu-item index="8-1">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>文章表</span>
                    </el-menu-item>
                    <el-menu-item index="8-2">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>文章分类表</span>
                    </el-menu-item>
                </el-sub-menu> -->
            </el-menu>
        </div>
    </div>

    <div class="navbar" :class="{ml200: ml2, ml64: ml64}">
        <div class="navbar-left">
            <div @click="fe" style="cursor: pointer;">
                <el-icon size="large" style="margin-top: 5px;">
                    <Fold />
                </el-icon>
            </div>
            <span>首页</span>
        </div>
        <div class="navbar-right">
            <div>
                <el-icon size="large">
                    <Search />
                </el-icon>
            </div>
            <div>
                <el-icon size="large">
                    <UserFilled />
                </el-icon>
            </div>
            <div>
                <el-icon size="large">
                    <Histogram />
                </el-icon>
            </div>
            <div>
                <el-icon size="large">
                    <MoreFilled />
                </el-icon>
            </div>
            <div>
                <el-icon size="large">
                    <Share />
                </el-icon>
            </div>

            <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                    <img src="../imgs/surtr.png" alt="">
                    <el-icon size="small">
                        <CaretBottom />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <router-link to="/homepage/personCenter" style="text-decoration: none;">
                            <el-dropdown-item command="a">个人中心</el-dropdown-item>
                        </router-link>
                        <el-dropdown-item command="b">布局设置</el-dropdown-item>
                        <router-link to="/" style="text-decoration: none;">
                            <el-dropdown-item command="c" divided>退出登录</el-dropdown-item>
                        </router-link>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>


            <!--   <div>
                <el-icon size="small">
                    <CaretBottom />
                </el-icon>
            </div> -->
        </div>
    </div>
    <div :class="{ml200: ml2, ml64: ml64}">
        <RouterView />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterView, useRouter } from 'vue-router';
import Coursepay from "@/views/sysManager/Coursepay.vue";

let router = useRouter();

let isCollapse = ref(false);
let isShow = ref(true);
let ml2 = ref(true);
let ml64 = ref(false);
function fe(){
    isCollapse.value = !isCollapse.value;
    isShow.value = !isShow.value;
    ml2.value = !ml2.value;
    ml64.value = !ml64.value;
}

const goAppointmentReply = () => {
    router.push('/sysManager/appointmentreply');
}
const goCoursepay = () => {
    router.push('/sysManager/Coursepay');
}
//公司
const goCompany = () => {
    router.push('/sysManager/company');
}
//咨询预约
const goAppointment = () =>{
    router.push('/sysManager/appointment');
}
//课程收藏
const goCourseSC = () =>{
    router.push('/sysManager/CourseSC');
}
//我的通知
const goMyNotice = () =>{
    router.push('/sysManager/mynotice');
}
//系统用户管理
const goSystem = () =>{
  router.push('/sysManager/system');
}
//普通用户管理
const goUser = () =>{
  router.push('/sysManager/user');
}
//用户评价
const goPingJia = ()=>{
    router.push('/homepage/pingJia')
}

//咨询师等级管理
const goLevel = ()=>{
    router.push('/homepage/consultLevelView')
}

//跳往课程分类管理
const goCourseType = ()=>{
    router.push('/homepage/courseTypeView')
}

//跳往课程管理
const goCourse = ()=>{
  router.push('/homepage/course')
}

//跳往课程评价管理
const goCoursemark = ()=>{
  router.push('/homepage/coursemark')
}

//跳往课程交流管理
const goCoursetalk = ()=>{
  router.push('/homepage/coursetalk')
}

//跳往课程回复管理
const goCoursereply = ()=>{
  router.push('/homepage/coursereply')
}

// 跳往心理测评管理
const goMT = ()=>{
    router.push('/homepage/mindTest')
}
// 跳往心理答疑管理->问题管理
const goQuestion = ()=>{
    router.push('/homepage/question')
}
//跳往心理答疑管理->回复管理
const goReply = ()=>{
    router.push('/homepage/reply')
}
// 师资管理->擅长领域管理
const goSpecialty = ()=>{
    router.push('/homepage/specialty')
}
// 内容管理->用户（我的）测评管理
const goMyTest = ()=>{
    router.push('/homepage/myTest')
}
// 内容管理->用户（我的）测评管理
const goMTQ = ()=>{
    router.push('/homepage/mindTestQ')
}
// 内容管理->文章
const goArticle = ()=>{
    router.push('/homepage/article')
}
// 内容管理->文章分类
const goArticleType = ()=>{
    router.push('/homepage/aticleType')
}
// 内容管理->心理知识
const goHeartkonw = ()=>{
    router.push('/homepage/HeartKonwledge')
}
// 内容管理->FM
const goFM = ()=>{
    router.push('/homepage/FM')
}
// 内容管理->Free
const goFree = ()=>{
    router.push('/homepage/Free')
}
// 跳往咨询->咨询师管理
const goconsult = ()=>{
    router.push('/homepage/consult')
}
// 跳往咨询->咨询师等级管理
const goconsultLevel = ()=>{
    router.push('/homepage/consultLevel')
}
//跳转咨询->咨询师证书
const goconsultCertificate= ()=>{
  router.push('/homepage/consultCertificate')
}
//跳转咨询->收费标准
const goCharge= ()=>{
  router.push('/homepage/charge')
}
//跳转咨询->收费分类类型
const gochargetype= ()=>{
  router.push('/homepage/Chargetype')
}
//跳转咨询->私信
const goprivatemessage= ()=>{
  router.push('/homepage/privatemessage')
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}
.ml200{margin-left: 200px; transition: all 0.5s;}
.ml64{margin-left: 64px; transition: all 0.5s;}
.colory{color: orange;}
.colorr{color: red;}
.fs13{font-size: 13px;}

.aside{width: 200px; height: 100vh;  position: fixed; overflow: auto;}
.el:hover{background-color:#304156;}
.el img{width: 36px;}
.el span{margin-left: 10px; font-weight: bold;}
.navbar{height: 50px; border-bottom: 0.5px solid rgb(225, 225, 225); display: flex; justify-content: space-between; padding: 0 10px;}
.navbar-left{display: flex; align-items: center;}
.navbar-left span{margin-left: 15px;}
.navbar-right{display: flex; align-items: center;}
.navbar-right div{padding-right: 15px;}
.navbar-right div:last-child{cursor: pointer;}
.navbar-right img{width: 40px; border-radius: 5px; padding-right: 6px; cursor: pointer;}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.title {
    
    text-align: center;
    background-color: #304156;
    box-sizing: border-box;
    height: 50px;
    padding-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title img {
    vertical-align: middle;
}
h1 {
    font-size: 14px;
    color: white;
    display: inline;
}

</style>